<template>
  <div>
    <el-dialog width="80%" :visible.sync="dialogVisible" @close="onClose" :title="title">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="250px"
               label-position="left">
        <el-form-item  label="VIP卡名称" prop="vipName">
          <el-input v-model="formData.vipName" placeholder="请输入VIP卡名称"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.type==0" label="VIP卡等级（1/2/3级）" prop="vipLevel">
          <el-radio-group v-model="formData.vipLevel">
            <el-radio :label="1">1级</el-radio>
            <el-radio :label="2">2级</el-radio>
            <el-radio :label="3">3级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.type==0"   label="奖励飞机等级" prop="rewardPlaneLevel">
          <el-input v-model="formData.rewardPlaneLevel" placeholder="请输入奖励飞机等级"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.type==0"   label="奖励飞机体力状态" prop="rewardPlaneEnergy">
          <el-input v-model="formData.rewardPlaneEnergy" placeholder="请输入奖励飞机体力状态"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.type==0 || formData.type==1"  label="激活所需能量值" prop="activationEnergy">
          <el-input v-model="formData.activationEnergy" placeholder="请输入激活所需能量值"></el-input>
        </el-form-item>
        <el-form-item  label="高级卡的产出收益" prop="outEnergy" v-if="formData.type==2 || formData.type==3" >
          <el-input v-model="formData.outEnergy" placeholder="请输入高级卡的产出收益"></el-input>
        </el-form-item>
        <el-form-item  label="消耗几級飞机" prop="airLevel" v-if="formData.type==3" >
          <el-input-number v-model="formData.airLevel"  :min="1" :max="10" label="消耗几級飞机"></el-input-number>
        </el-form-item>
        <el-form-item  label="消耗飞机数量" prop="airNumber" v-if="formData.type==3" >
          <el-input-number v-model="formData.airNumber"  :min="1" :max="999999999" label="飞机数量"></el-input-number>
        </el-form-item>

        <el-form-item  label="状态" prop="onlineStatus">
          <el-radio-group v-model="formData.onlineStatus">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
<!--        0=飞机卡,1=免广告-->
        <el-form-item  label="类型" prop="type">
          <el-radio-group v-model="formData.type" :disabled="id">
            <el-radio :label="0">飞机卡</el-radio>
            <el-radio :label="1">免广告</el-radio>
            <el-radio :label="2">高级卡</el-radio>
            <el-radio :label="3">飞机兑换的高级卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  label="介绍" prop="details">
          <div v-for="(item,index) in formData.details" :key="index" style="width:100%;display: flex;align-items: center;margin-top: 5px">
            <el-input v-model="formData.details[index]" placeholder="请输入介绍"></el-input>
            <div style="display: flex;align-items: center;margin-left: 10px;">
              <el-button type="primary" @click="addDetail">新增</el-button>
              <el-button type="danger" v-if="formData.details.length>1" @click="removeDetail(index)">删除</el-button>
            </div>
          </div>
        </el-form-item>

        <el-form-item  label="天数" prop="day" v-if="formData.type==1 || formData.type==2 || formData.type==3" >
          <el-input-number v-model="formData.day"  :min="1" :max="9999" label="请输入天数"></el-input-number>
        </el-form-item>
        <el-form-item  label="备注" prop="description">
          <el-input v-model="formData.description" placeholder="请输入备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {mVipCardADD, mVipCardUpdate} from "@/api/aircraft/aircraft"

export default {
  data() {
    return {
      dialogVisible: false,
      title: '编辑',
      formData: {
        day:1,
        activationEnergy: undefined,
        description: undefined,
        onlineStatus: 0,
        rewardPlaneEnergy: undefined,
        rewardPlaneLevel: undefined,
        vipLevel: 1,
        outEnergy: undefined,
        vipName: undefined,
        details:[''],
        type:0,
        airLevel: 1,
        airNumber: 1,
      },
      rules: {
        day:[{
          required: true,
          message: '请输入天数',
          trigger: 'blur'
        }],
        activationEnergy: [{
          required: true,
          message: '请输入激活所需能量值',
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
        rewardPlaneLevel: [{
          required: true,
          message: '请输入奖励飞机等级',
          trigger: 'blur'
        }],
        rewardPlaneEnergy: [{
          required: true,
          message: '请输入奖励飞机体力状态',
          trigger: 'blur'
        }],
        vipName: [{
          required: true,
          message: '请输入VIP卡名称',
          trigger: 'blur'
        }],
      },
      id:null

    }
  },

  methods: {
    addDetail(){
      this.formData.details.push('')
    },
    removeDetail(index){
      this.formData.details.splice(index,1)
    },
    // 弹窗
    async onOpen(obj) {
      if(obj){
        this.id = true
        this.title="编辑"
        this.formData =JSON.parse(JSON.stringify(obj))
        if(this.formData.details.length==0){
          this.formData.details[0]=''
        }
      }else{
        this.id = false
        this.title="新增"
        this.onClose()
      }
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
      // this.$refs['elForm'].resetFields()
      this.formData.day=1
        this.formData.activationEnergy= undefined
        this.formData.description=  undefined
        this.formData.onlineStatus=  0
        this.formData.rewardPlaneEnergy= undefined
        this.formData.rewardPlaneLevel=  undefined
        this.formData.vipLevel=  1
        this.formData.outEnergy= undefined
        this.formData.vipName=  undefined
        this.formData.details= ['']
        this.formData.type= 0
        this.formData.airLevel= 1
        this.formData.airNumber= 1
    },
    close() {
      this.dialogVisible = false
    },
    // 提交数据
    handleConfirm() {
      let iShow = false
      this.formData.details.forEach(item => {
        if(!item){
          iShow = true
          return
        }
      })
      if(iShow){
        this.$message({
          message: '请完善介绍数据',
          type: 'warning'
        });
        return
      }
      this.$refs['elForm'].validate(async valid => {
        this.loading = true
        if (!valid) {
          // 如果验证不通过，则阻止后续代码执行
          this.loading = false;
          return;
        }
        if (this.id) {
          try {
            if(this.formData.type==1){
              this.formData.vipLevel=0
            }
            // 编辑
            await mVipCardUpdate(this.formData)
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        } else {
          try {

            // 新增
            if(this.formData.type==1){
              this.formData.vipLevel=0
              this.formData.day=""
            }
            if(this.formData.type==2  || this.formData.type==3 ){
              this.formData.activationEnergy=0
            }
            await mVipCardADD(this.formData)
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
